<template>
  <div class="hp_box">
    <!-- 高压科 -->
    <section class="content">
      <div class="model_title"></div>
      <div class="bg_cover">
        <div class="bg_name">t4动力系统能源分析报告</div>
        <div class="bg_time">{{ currentdate }}</div>
      </div>
      <!-- <div class="model_title"></div> -->
      <div class="echart_card">
        <p>概览</p>
        <p>
          本报告期内，t4全厂共消耗电能{{
            ElectricityAnalysiseDataDesc.t4Electricity
          }}
          kWh，环比变化{{ ElectricityAnalysiseDataDesc.electricityPercentae }}%
          ,具体用电情况详见下方高低压科数据汇总。
        </p>
        <p>本期能耗基准数据如下：</p>
        <p>
          单位建筑面积能耗{{
            ElectricityAnalysiseDataDesc.nowArea
          }}kWh/m2，比上一期变化
          {{ ElectricityAnalysiseDataDesc.enercyConsumprion }}%
        </p>
        <p>
          单位洁净室面积能耗:
          {{
            ElectricityAnalysiseDataDesc.cleanEnercyConsumprion
          }}kWh/m2，比上一期变化{{
            ElectricityAnalysiseDataDesc.cleanPercentae
          }}%
        </p>
        <p>
          单片能耗：{{ ElectricityAnalysiseDataDesc.mcu }}kWh/m2，比上一期变化{{
            ElectricityAnalysiseDataDesc.mcuPercentae
          }}%
        </p>
      </div>

      <div class="model_title">t4环安能耗-高低压科</div>
      <div class="echart_card">
        <div class="card_title">t4本期用电量及用电趋势</div>
        <div class="echarts_data chart_height t4hp_height">
          <vechart :options="piesHpOptionData" />
        </div>
      </div>

      <div class="echart_card">
        <div class="card_title">厂务本期用电趋势</div>
        <div class="echarts_data chart_height">
          <vechart :options="factoryEleOptionData" />
          <div></div>
        </div>
      </div>
      <div class="echart_card">
        <p>本期碳排放当量：</p>
        <div class="card_title">碳排放</div>
        <div class="cc_data">
          本期累计碳排放当量：{{ cc.now }} wt ，环比上期变化
          {{ cc.percentage }} %
        </div>
        <!-- <div class="cc_data">本期累计碳排放当量：{{ cc.now }} wt</div> -->
      </div>

      <div class="echart_card">
        <div class="card_title">制程用电趋势</div>
        <div class="echarts_data chart_height">
          <vechart :options="maulineOptionData" />
        </div>
      </div>

      <div class="echart_card">
        <p>
          从t4总能耗与外气干球温度的相关分析可以看出，总能耗与干球温度呈现明显的正相关，相关系数{{
            queryCoefficientDesc.score
          }}
        </p>
        <div class="card_title">t4总能耗与外气干球温度趋势分析</div>
        <div class="echarts_data chart_height">
          <vechart :options="t4TotalData" />
        </div>
      </div>

      <div class="echart_card">
        <p>
          从t4单片能耗与外气干球温度的相关分析可以看出，单片能耗也与温度成正相关，相关系数{{
            queryMonoliticCoefficientDesc.score
          }}
        </p>
        <div class="card_title">t4本期单片能耗与外气干球温度相关性分析</div>
        <div class="echarts_data chart_height">
          <vechart :options="dashedData" />
        </div>
      </div>

      <div class="echart_card">
        <p>
          本期内高低压科运转正常，共发生一级报警{{
            powerList[0].allNum
          }}次，已处理{{ powerList[0].endNum }}次，处理率{{
            powerList[0].value
          }}%。
        </p>
        <div class="card_title">高低压科FMCS本期一级报警记录</div>
        <div class="echarts_data table_data">
          <mytable :mydata="tableData"></mytable>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import apis from "@/api/api.js";
import hplineOption from "../jsonmodule/hpjson/hplineOption.json";
import mauHpOption from "../jsonmodule/hpjson/mauHp.json";
import t4Total from "../jsonmodule/hpjson/t4Total.json";
import dashedOption from "../jsonmodule/hpjson/dashedOption.json";
import factoryEleOption from "../jsonmodule/hpjson/factoryEleOption.json";
import piesHpOption from "../jsonmodule/hpjson/piesHpOption.json";
import piesHp from "../jsonmodule/hpjson/piesHp.json";
export default {
  components: {
    vechart: () => import("@components/charts/Vechart.vue"),
    mytable: () => import("../common/Mytable.vue"),
  },
  data() {
    return {
      powerList: JSON.parse(localStorage.getItem("powerList")),
      queryPoliceAnalysisDesc: [],
      ElectricityAnalysiseDataDesc: {},
      queryCoefficientDesc: {},
      queryMonoliticCoefficientDesc: {},
      hplineOption: hplineOption,
      dashedOption: dashedOption,
      t4Total: t4Total,
      mauHpOption: mauHpOption, //mau用电量配置文件
      factoryEleOption: factoryEleOption, //厂务用电趋势
      piesHpOption: piesHpOption,
      piesHp: piesHp,
      areaStandard: 66,
      cc: {},
      mauHpdata: {}, //  mau用电数据
      t4powerData: {
        dataX: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        dataY: [333, 194, 269, 276, 211, 256, 156, 333, 194, 189, 176, 376],
      },
      factoryEleObj: {}, //厂务用电趋势数据
      factyringProcessObj: {}, //制程用电趋势
      t4EctricityObj: {}, //T4用电量及用电趋势数据
      t4EctricityObjdataall: {},
      t4EctricityObjdataLeft: [],
      t4EctricityObjdataRight: [],
      t4EctricityObjdataMiddle: [],
      EnergyConsumptionAndTemperatureObj: {}, //t4总能耗与外气干球温度趋势分析
      MonolithicObj: {}, //本年t4单片能耗与外气干球温度相关性分析
      tableData: [],
      currentdate: "",
    };
  },
  created() {
    this.initData();
    this.curentweekdate();
    this.initDataDesc();
  },
  methods: {
    fmcsTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    async initData() {
      //T4用电量及用电趋势
      const t4EctricityData = await apis.t4Ectricity();
      this.t4EctricityObj = t4EctricityData.data.content;
      // console.log(this.t4EctricityObj, "T4用电量及用电趋势");

      this.t4EctricityObjdataall = this.t4EctricityObj.all;
      this.t4EctricityObjdataLeft = this.t4EctricityObj.left;
      this.t4EctricityObjdataMiddle = this.t4EctricityObj.middle;
      this.t4EctricityObjdataRight = this.t4EctricityObj.right;
      // console.log(this.t4EctricityObjdataall, "T4用电量及用电趋势");
      //碳排放量
      const queryCarbonEmissionData = await apis.queryCarbonEmission();
      this.cc = queryCarbonEmissionData.data.content;
      console.log(queryCarbonEmissionData, "碳排放量");
      //厂务用电趋势
      const queryElectricityConsumptionTrendData =
        await apis.queryElectricityConsumptionTrend();
      this.factoryEleObj = queryElectricityConsumptionTrendData.data.content;
      // console.log(this.factoryEleObj, "厂务用电趋势");

      //制程用电趋势
      const queryManufactyringProcessData =
        await apis.queryManufactyringProcess();
      this.factyringProcessObj = queryManufactyringProcessData.data.content;
      // console.log(this.factyringProcessObj, "制程用电趋势");

      // FMCS一级报警记录
      const HpfmcsAlarmRecordData = await apis.fmcsAlarmRecord();
      this.tableData = HpfmcsAlarmRecordData.data.content.powerList;
      // console.log(this.tableData,'FMCS一级报警记录')

      // t4总能耗与外气干球温度趋势分析
      const queryEnergyConsumptionAndTemperatureData =
        await apis.queryEnergyConsumptionAndTemperature();
      this.EnergyConsumptionAndTemperatureObj =
        queryEnergyConsumptionAndTemperatureData.data.content;
      // console.log(
      //   this.EnergyConsumptionAndTemperatureObj,
      //   "t4总能耗与外气干球温度趋势分析"
      // );

      // 本年t4单片能耗与外气干球温度相关性分析
      const queryMonolithicData = await apis.queryMonolithic();
      this.MonolithicObj =
        queryMonolithicData.data.content && queryMonolithicData.data.content;
      // console.log(this.MonolithicObj, "本年t4单片能耗与外气干球温度相关性分析");
    },
    async initDataDesc() {
      //数据填空分析
      const ElectricityAnalysiseData = await apis.queryElectricityAnalysis();
      this.ElectricityAnalysiseDataDesc = ElectricityAnalysiseData.data.content;
      // console.log(this.ElectricityAnalysiseDataDesc,'数据填空分析')

      //从zong能耗与外气干球温度的相关分析可以看出，单片能耗也与温度成正相关，相关系数____
      const queryCoefficientData = await apis.queryCoefficient();
      this.queryCoefficientDesc = queryCoefficientData.data.content;
      // console.log(this.queryCoefficientDesc, "相关系数____");

      //从t4单片能耗与外气干球温度的相关分析可以看出关，相关系数____
      const queryMonoliticCoefficientData =
        await apis.queryMonoliticCoefficient();
      this.queryMonoliticCoefficientDesc =
        queryMonoliticCoefficientData.data.content;
      // console.log(this.queryMonoliticCoefficientDesc, "单片相关系数____");
    },
    async curentweekdate() {
      const returnDate = await apis.returnDate();
      this.currentdate = returnDate.data.content.zhouqi;
    },
  },
  computed: {
    //制程用电趋势
    maulineOptionData() {
      if (
        this.factyringProcessObj &&
        this.factyringProcessObj.time &&
        this.factyringProcessObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.mauHpOption,
          xAxis: {
            ...this.mauHpOption.xAxis,
            axisLabel: {
              ...this.mauHpOption.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.factyringProcessObj.time,
          },
          yAxis: [
            {
              type: "value",
              name: "用电量(万kWh)",
              min: 0,
              max: 60,
              interval: 20,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "投片量(片)",
              min: 0,
              max: 810,
              interval: 270,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              ...this.mauHpOption.series[0],
              data: this.factyringProcessObj.value["投片量"],
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(片)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
            {
              ...this.mauHpOption.series[1],
              data: this.factyringProcessObj.value["ARRAY厂"],
            },
            {
              ...this.mauHpOption.series[2],
              data: this.factyringProcessObj.value.Mod,
            },
            {
              ...this.mauHpOption.series[3],
              data: this.factyringProcessObj.value.Touch,
            },
            {
              ...this.mauHpOption.series[4],
              data: this.factyringProcessObj.value.EL,
            },
          ],
        };
      } else {
        return this.mauHpOption;
      }
    },
    //t4总能耗与外气干球温度趋势分析
    t4TotalData() {
      if (
        this.EnergyConsumptionAndTemperatureObj &&
        this.EnergyConsumptionAndTemperatureObj.times &&
        this.EnergyConsumptionAndTemperatureObj.times.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.t4Total,
          xAxis: {
            ...this.t4Total.xAxis,
            axisLabel: {
              ...this.t4Total.xAxis.axisLabel,
              // formatter: formatter
              show: true,
              interval: 0,
              rotate: 45,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: this.EnergyConsumptionAndTemperatureObj.times,
          },
          series: [
            {
              ...this.t4Total.series[0],
              data: this.EnergyConsumptionAndTemperatureObj.electricity,
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(Kwh)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
            {
              ...this.t4Total.series[1],
              data: this.EnergyConsumptionAndTemperatureObj.temperature,
            },
          ],
        };
      } else {
        return this.t4Total;
      }
    },
    //本年t4单片能耗与外气干球温度相关性分析
    dashedData() {
      // return this.dashedOption;
      if (
        this.MonolithicObj &&
        this.MonolithicObj.temperature &&
        this.MonolithicObj.temperature.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.dashedOption,
          xAxis: {
            ...this.dashedOption.xAxis,
            // axisLabel: {
            //   ...this.dashedOption.xAxis.axisLabel,
            //   // formatter: formatter
            //   show: true,
            //   interval: 0,
            //   rotate: 45
            // },
            // axisLine: {
            //   show: false
            // },
            // axisTick: {
            //   show: false
            // },
            data: this.MonolithicObj.temperature,
          },
          series: [
            {
              ...this.dashedOption.series[0],
              data: this.MonolithicObj.value,
            },
            // {
            //   ...this.dashedOption.series[1],
            //   data: this.MonolithicObj.value
            // }
          ],
        };
      } else {
        return this.dashedOption;
      }
    },
    //厂务用电趋势
    factoryEleOptionData() {
      // return this.factoryEleOption;
      if (
        this.factoryEleObj &&
        this.factoryEleObj.time &&
        this.factoryEleObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("hh时");
        };

        return {
          ...this.factoryEleOption,
          legend: {
            ...this.factoryEleOption.legend,
            data: this.factoryEleObj.name,
          },

          xAxis: {
            ...this.factoryEleOption.xAxis,
            axisLabel: {
              ...this.factoryEleOption.xAxis.axisLabel,
              // formatter: formatter
            },
            //    axisLabel: {
            //   ...this.t4Total.xAxis.axisLabel,
            //   // formatter: formatter
            //   show: true,
            //   interval: 0,
            //   rotate: 45
            // },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: this.factoryEleObj.time,
          },
          yAxis: [
            {
              type: "value",
              name: "用电量(万kWh)",
              min: 0,
              max: 60,
              interval: 20,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "投片量(片)",
              min: 0,
              max: 810,
              interval: 270,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              ...this.factoryEleOption.series[0],
              data: this.factoryEleObj.value["MAU"],
            },
            {
              ...this.factoryEleOption.series[1],
              data: this.factoryEleObj.value["PCW"],
            },
            {
              ...this.factoryEleOption.series[2],
              data: this.factoryEleObj.value["PV"],
            },
            {
              ...this.factoryEleOption.series[3],
              data: this.factoryEleObj.value["照明"],
            },
            {
              ...this.factoryEleOption.series[4],
              data: this.factoryEleObj.value["动力辅助"],
            },
            {
              ...this.factoryEleOption.series[5],
              data: this.factoryEleObj.value["AHU"],
            },
            {
              ...this.factoryEleOption.series[6],
              data: this.factoryEleObj.value["排气系统"],
            },
            {
              ...this.factoryEleOption.series[7],
              data: this.factoryEleObj.value["冰水系统"],
            },
            {
              ...this.factoryEleOption.series[8],
              data: this.factoryEleObj.value["废水系统"],
            },
            {
              ...this.factoryEleOption.series[9],
              data: this.factoryEleObj.value["FFU"],
            },
            {
              ...this.factoryEleOption.series[10],
              data: this.factoryEleObj.value["纯水系统"],
            },
            {
              ...this.factoryEleOption.series[11],
              data: this.factoryEleObj.value["杂项"],
            },
            {
              ...this.factoryEleOption.series[12],
              data: this.factoryEleObj.value["CDA系统"],
            },
            {
              ...this.factoryEleOption.series[13],
              data: this.factoryEleObj.value["投片量"],
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(片)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
          ],
        };
      } else {
        return this.factoryEleOption;
      }
    },
    //t4用电量及用电趋势
    piesHpOptionData() {
      // return this.piesHpOption
      // return this.piesHp
      var that = this;
      const formatter = function (value, index) {
        // var lightTypeList = param.data.lightTypeList;
        // console.log(value.name,'123')
        var dataSource = [];
        if (value.name.indexOf("厂务") != -1) {
          dataSource = that.t4EctricityObjdataLeft;
        } else if (value.name.indexOf("制程") != -1) {
          dataSource = that.t4EctricityObjdataRight;
        } else {
          dataSource = [];
        }
        //拼接一个字符串
        // var res = param.data.name + "<br/>";
        var res = "";
        //循环遍历内容
        for (var i = 1; i <= dataSource.length; i++) {
          // var val = lightTypeList[i].lightTotal;
          // rgba(64, 192, 251, 1)
          res += `<div style="background:rgba(94, 192, 251,${
            i / 10
          });border-radius:4px;width:100%;height:30px;color:#333333;zIndex:999">${
            dataSource[i - 1]
          }</div>`;
        }
        return res;
      };
      if (this.t4EctricityObjdataall) {
        return {
          ...this.piesHp,

          tooltip: {
            ...this.piesHp.tooltip,
            formatter: formatter,
          },
          title: {
            ...this.piesHp.title,
            text: this.t4EctricityObjdataall.name,
            subtext: this.t4EctricityObjdataall.value + "万 kWh",
          },
          series: [
            {
              ...this.piesHp.series[0],
              data: this.t4EctricityObjdataMiddle,
            },
          ],
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hp_box {
  // height: 666px;
  // background-color: #bbb;
  .content {
    margin: 0 auto;
    width: 1280px;
    background-color: #eee;
    .bg_cover {
      color: #355d9a;
      margin: 20px auto;
      font-size: 66px;
      width: 100%;
      height: 1648px;
      background: url("../../../../../assets/report/1.jpg") no-repeat center;
      background-size: contain;
      position: relative;
      .bg_name {
        position: absolute;
        top: 18%;
        left: 46%;
        writing-mode: vertical-lr;
      }
      .bg_time {
        position: absolute;
        left: 30%;
        font-size: 36px;
        bottom: 20%;
      }
    }
    .model_title {
      width: 100%;
      height: 88px;
      background: url("../../../../../assets/report/ectitle.jpg") no-repeat
        center;
      background-size: cover;
      text-align: center;
      line-height: 88px;
      font-size: 42px;

      font-weight: bold;
      color: #000000;
    }
    .echart_card {
      width: 100%;
      padding: 2% 4.5%;
      .card_title {
        height: 70px;
        width: 100%;
        line-height: 70px;
        padding-left: 48px;
        font-size: 30px;
        background: #5ea9fd;
        border-radius: 15px 15px 0px 0px;
        font-weight: bold;
        color: #ffffff;
      }
      .echarts_data {
        width: 100%;
        // height: 550px;
        padding-top: 10px;
        background: #ffffff;
        border-radius: 0px 0px 15px 15px;
      }
      .chart_height {
        height: 300px;
      }
      .t4hp_height {
        box-sizing: border-box;
        padding-top: 10px;
        height: 450px;
      }
      .cc_data {
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        background: #ffffff;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 36px;
        font-weight: bold;
        color: #333333;
      }
      .table_data {
        padding-top: 22px;
      }
      p {
        color: #000000;
        font-size: 24px;
      }
    }
  }
}
</style>
